import React from 'react';
import { useSelector } from "react-redux";
import { useParams, Redirect} from 'react-router-dom';
import CollectionItem from "../../components/collection-item/collection-item.component";
import './collection.styles.scss';

const CollectionPage = () => {
    let { collectionId } = useParams();
    const collections = useSelector(state => state.shop.collections
        .find(collection => collection.routeName === collectionId));

    if (!collections) {
        <Redirect to="/shop" />
    }
    return (
        <div className='collection-page'>
            <h2 className="title">{collections && collections.title}</h2>
            <div className="items">
                {collections && collections.items.map(item =>(
                        <CollectionItem key={item.id} item={item} />
                    ))
                }
            </div>
        </div>
    );
}

export default CollectionPage;
